<template>
  <div class="container">
    <van-nav-bar title="打款" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <div class="head">
        <div class="meney">
          <div class="inner">
            <div style="font-size:13px">提现金额</div>
            <div style="font-size:12px;margin-top:2px">
              ￥
              <span style="font-size:16px;font-weight:bold;">{{payMentInfo.sum_commission}}</span>
            </div>
          </div>
          <div class="inner">
            <div style="font-size:13px">扣税金额</div>
            <div style="font-size:12px;margin-top:2px">
              ￥
              <span style="font-size:16px;font-weight:bold;">{{payMentInfo.tax_amount}}</span>
            </div>
          </div>
          <div class="inner">
            <div style="font-size:13px">实际应打款金额</div>
            <div style="font-size:12px;margin-top:2px;color:#F83D3C">
              ￥
              <span
                style="font-size:16px;font-weight:bold;color:#F83D3C"
              >{{payMentInfo.withdraw_amount}}</span>
            </div>
          </div>
        </div>
        <div class="ballot">
          开票类型：{{payMentInfo.invoice_info}}
          <span
            style="font-size:13px;color:#3158F1;float:right"
            v-if="
          payMentInfo.invoice_type == 1 ||
          payMentInfo.invoice_type == 2 ||
          payMentInfo.invoice_type == 3 ||
          payMentInfo.invoice_type == 4
        "
            @click="receiptModal = true"
          >查看发票</span>
        </div>
      </div>
      <div class="main">
        <div style="color:#020C1D;font-size:14px">收款账户</div>

        <div v-if="payMentInfo.collect_type == 1">
          <div class="inside">
            <div style="color:#787D85;font-size:14px">卡号</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.bank_no}}</div>
          </div>
          <div class="inside">
            <div style="color:#787D85;font-size:14px">开户人</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.bank_name}}</div>
          </div>
          <div class="inside">
            <div style="color:#787D85;font-size:14px">身份证号</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.bank_idcard}}</div>
          </div>
          <div class="inside">
            <div style="color:#787D85;font-size:14px">开户行</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.bank}}</div>
          </div>
          <div class="inside">
            <div style="color:#787D85;font-size:14px">开户支行</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.bank_sub}}</div>
          </div>
        </div>
        <div v-if="payMentInfo.collect_type == 2">
          <div class="inside">
            <div style="color:#787D85;font-size:14px">支付宝号</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.ali_no}}</div>
          </div>
          <div class="inside">
            <div style="color:#787D85;font-size:14px">姓名</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.ali_name}}</div>
          </div>
          <div class="inside">
            <div style="color:#787D85;font-size:14px">身份证号</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.ali_idcard}}</div>
          </div>
        </div>
        <div v-if="payMentInfo.collect_type == 3">
          <div class="inside">
            <div style="color:#787D85;font-size:14px">微信号</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.ali_no}}</div>
          </div>
          <div class="inside">
            <div style="color:#787D85;font-size:14px">姓名</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.ali_name}}</div>
          </div>
          <div class="inside">
            <div style="color:#787D85;font-size:14px">身份证号</div>
            <div style="color:#020C1D;font-size:14px">{{payMentInfo.ali_idcard}}</div>
          </div>
        </div>
      </div>
      <!-- 支付 -->
      <div class="footer">
        <div style="color:#020C1D;font-size:14px">选择支付方式</div>
        <div class="working_cat" @click="selectHandle('one')" v-if="gongmaoPaneShow">
          工猫支付
          <img
            v-show="selectPayment == 'one'"
            src="../../../static/appimg/sure.png"
            style="height:10.06px;width:12.75px"
          />
        </div>
        <div class="cloud_account" @click="selectHandle('two')" v-if="yzhPaneShow">
          云账户支付
          <img
            v-show="selectPayment == 'two'"
            src="../../../static/appimg/sure.png"
            style="height:10.06px;width:12.75px"
          />
        </div>
        <div class="alipay" @click="selectHandle('three')" v-if="zfbPaneShow">
          支付宝
          <img
            v-show="selectPayment == 'three'"
            src="../../../static/appimg/sure.png"
            style="height:10.06px;width:12.75px"
          />
        </div>
        <div class="offline" @click="selectHandle('four')">
          线下打款
          <img
            v-show="selectPayment == 'four'"
            src="../../../static/appimg/sure.png"
            style="height:10.06px;width:12.75px"
          />
        </div>
        <div class="offline" @click="selectHandle('five')" v-if="wxPaneShow">
          微信
          <img
            v-show="selectPayment == 'five'"
            src="../../../static/appimg/sure.png"
            style="height:10.06px;width:12.75px"
          />
        </div>
      </div>
      <div class="upLoad" v-show="selectPayment == 'four'">
        <div class="text">上传打款截图</div>
        <div class="uploader">
          <van-uploader :after-read="afterRead" v-model="fileList" :max-count="1" />
        </div>
      </div>
      <van-button :disabled="paybtnshow" type="primary" class="sure" @click="onSure">确定打款</van-button>
    </div>
    <!-- 查看发票 -->
    <van-popup
      v-model="receiptModal"
      position="bottom"
      :style="{ height: '30%',borderRadius:'15px 15px 0 0',padding:'25px 15px' }"
    >
      <div
        v-if="payMentInfo.invoice_way == 2"
        style="margin-bottom: 20px;font-size:15px"
      >物流公司：{{ payMentInfo.track_company }}</div>
      <div
        v-if="payMentInfo.invoice_way == 2"
        style="margin-bottom: 20px;font-size:15px"
      >单号：{{ payMentInfo.track_no }}</div>
      <div v-if="payMentInfo.invoice_way == 1" class="pdf">
        <a
          :href="payMentInfo.invoice_img"
          target="_blank"
          style="color: rgb(0, 90, 255)"
        >{{ payMentInfo.invoice_img }}</a>
      </div>
      <div v-if="payMentInfo.invoice_way == 1" class="flexcc" style="margin: 20px 0">
        <el-button round plain type="primary" @click="down(payMentInfo.invoice_img)">下载</el-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import * as qiniu from "qiniu-js";
import chuantu from "@/components/chuantu.vue";
export default {
  data() {
    return {
      payMentInfo: {},
      receiptModal: false,
      selectPayment: "one",
      lurutype: "",
      gongmaozhifuYue: "",
      yunzhanghuYue: "",
      zhibaofuyue: 0,
      gongmaozhifuObj: {
        //公猫打款参数
        id: "",
        type: "2",
        withdraw_remark: ""
      },
      yunzhanghuObj: {
        //云账户打款参数
        id: "",
        type: "1",
        withdraw_remark: ""
      },
      zhifubaoObj: {
        //支付宝打款参数
        id: "",
        withdraw_remark: ""
      },
      weixinObj: {
        //微信打款参数
        id: "",
        withdraw_remark: ""
      },
      xianxiadakuanObj: {
        //线下支付参数
        id: "",
        withdraw_remark: "",
        withdraw_pic: ""
      },
      fileList: [],
      gongmaoPaneShow: false, //工猫支付
      yzhPaneShow: false, //云支付
      zfbPaneShow: false, //支付宝
      wxPaneShow: false, //微信支付
      iscanpayinfo: {},
      iscanpayinfo2: {},
      zhifubaom: false,
      paybtnshow: false
    };
  },
  created() {
    this.getPaymentInfo();
    axios.get("/own/ali/pay/balance").then(response => {
      if (response.data.msg.code == 0) {
        this.zhibaofuyue = response.data.data.available_amount;
      } else {
        this.$message.error(response.data.msg.info);
      }
    });

    axios.get("/own/ali/pay/get").then(response => {
      if (response.data.msg.code == 0) {
        if (response.data.data.ali_name) {
          this.zhifubaom = true;
        }
      } else {
        this.$message.error(response.data.msg.info);
      }
    });
  },
  methods: {
    afterRead(fileValue) {
      console.log("file", file);
      const { file } = fileValue;
      this.uploadok(file);
    },
    getRandomChar: function(len = 11) {
      var x = "0123456789qwertyuioplkjhgfdsazxcvbnm"; // 需要什么字符这里添加
      var tmp = "";
      var timestamp = new Date().getTime();
      for (var i = 0; i < len; i++) {
        tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
      }
      return timestamp + tmp;
    },
    uploadok: function(file) {
      let name = this.getRandomChar() + "." + file.name.split(".")[1];
      var that = this;
      axios.post(`/api/qiniu/uploadtoken`, { name: name }).then(response => {
        if (response.data.msg.code == 0) {
          const observer = {
            next(res) {
              console.log(res);
            },
            error(err) {
              console.log(err);
            },
            complete(res) {
              that.xianxiadakuanObj.withdraw_pic =
                "https://gperson.gantanhaokeji.top/" + res.key;
            }
          };
          const observable = qiniu.upload(
            file,
            name,
            response.data.data.token,
            {},
            {}
          );
          const subscription = observable.subscribe(observer);
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    down(item) {
      window.location.href = item;
    },
    getPaymentInfo() {
      axios
        .get("/own/commission/withdrawinfo?id=" + this.$route.query.id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.payMentInfo = response.data.data.data;
            if (
              response.data.data.config.is_alipay == 1 &&
              response.data.data.data.collect_type == 2
            ) {
              //  是否已配置支付宝  is_alipay  0没配  1已配置
              this.zfbPaneShow = true;
            } else {
              this.zfbPaneShow = false;
            }
            if (
              response.data.data.config.is_yun == 1 &&
              response.data.data.data.invoice_type == 5
            ) {
              //是否已配置云支付 is_yun  0没配  1已配置
              this.yzhPaneShow = true;
            } else {
              this.yzhPaneShow = false;
            }
            if (response.data.data.config.is_gongmao == 1) {
              //是否已配置工猫支付   is_gongmao 0没配  1已配置
              this.gongmaoPaneShow = true;
            } else {
              this.gongmaoPaneShow = false;
            }
            if (
              response.data.data.config.is_wexin == 1 &&
              response.data.data.data.collect_type == 3
            ) {
              //是否已配置微信支付  is_wexin  0没配  1已配置
              this.wxPaneShow = true;
            } else {
              this.wxPaneShow = false;
            }
            if (
              this.gongmaozhifuObj.withdraw_remark ||
              this.yunzhanghuObj.withdraw_remark ||
              this.zhifubaoObj.withdraw_remark ||
              this.weixinObj.withdraw_remark ||
              this.xianxiadakuanObj.withdraw_remark
            ) {
              this.gongmaozhifuObj.withdraw_remark = "";
              this.yunzhanghuObj.withdraw_remark = "";
              this.zhifubaoObj.withdraw_remark = "";
              this.weixinObj.withdraw_remark = "";
              this.xianxiadakuanObj.withdraw_remark = "";
              this.xianxiadakuanObj.withdraw_pic = "";
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    selectHandle(showVal) {
      this.selectPayment = showVal;
      /* 这边是支付的判断
          showVal == three 支付宝
          showVal == one 工猫
          showVal == two 云账户
          showVal == four 线下
          showVal == five 微信 
      */
      /* 工猫 */

      if (showVal == "one") {
        this.lurutype = "0";
        let obj = {
          type: "2",
          id: this.payMentInfo.id
        };
        axios
          .get(
            "/own/commission/findAccount?id=" +
              this.payMentInfo.id +
              "&type=" +
              obj.type
          )
          .then(response => {
            if (response.data.msg.code == 0) {
              this.gongmaozhifuYue = response.data.data.total_balance;
              if (
                this.gongmaozhifuYue * 1 >=
                this.payMentInfo.withdraw_amount * 1
              ) {
                //如果工猫账户余额充足
                this.paybtnshow = false;
              } else {
                this.paybtnshow = true;
              }
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
      /* 云账户 */

      if (showVal == "two") {
        this.lurutype = "1";
        let obj = {
          type: "1"
        };
        axios
          .get(
            "/own/commission/findAccount?id=" +
              this.payMentInfo.id +
              "&type=" +
              obj.type
          )
          .then(response => {
            if (response.data.msg.code == 0) {
              this.yunzhanghuYue = response.data.data.total_balance;
              console.log(
                "云账户余额，本次支付",
                this.yunzhanghuYue,
                this.payMentInfo.withdraw_amount
              );
              if (
                this.yunzhanghuYue * 1 >=
                this.payMentInfo.withdraw_amount * 1
              ) {
                //如果云账户余额充足
                this.paybtnshow = false;
              } else {
                this.paybtnshow = true;
              }
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
      /* 支付宝 */
      if (showVal == "three") {
        this.lurutype = "2";
        if (this.zhifubaom) {

          axios.get('/own/ali/safe/user/account/query').then((response)=>{
            if (response.data.msg.code == 0) {
              this.iscanpayinfo2 = response.data.data;
              this.zhibaofuyue = response.data.data.available_amount;
              if (this.zhibaofuyue * 1 >= this.all2.withdraw_amount * 1) {
                //如果支付宝账户余额充足
                this.paybtnshow = false;
              } else {
                this.paybtnshow = true;
              }
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }
      }
      /* 线下 */
      if (showVal == "four") {
        this.lurutype = "4";
        this.paybtnshow = false;
      }
      /* 微信 */
      if (showVal == "five") {
        this.lurutype = "3";
        this.paybtnshow = false;
      }
    },
    onSure() {
      if (!this.lurutype) {
        this.$message.error("请选择打款方式");
        return;
      }
      if (this.lurutype == 0) {
        //最终工猫支付打款
        this.gongmaozhifuObj.id = this.payMentInfo.id;
        axios
          .post("/own/commission/dowithdrawYun", this.gongmaozhifuObj)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: "工猫支付成功！",
                type: "success",
              });
             this.$router.go(-1)
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
      if (this.lurutype == 1) {
        //最终云账户打款
        this.yunzhanghuObj.id = this.payMentInfo.id;
        axios
          .post("/own/commission/dowithdrawYun", this.yunzhanghuObj)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: "云账户打款成功！",
                type: "success",
              });
                this.$router.go(-1)
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
      if (this.lurutype == 2) {
        //最终支付宝支付打款
        this.zhifubaoObj.id = this.payMentInfo.id;
        this.zhifubaoObj.pay_type = 1;
        axios
          .post("/own/ali/pay/payment", this.zhifubaoObj)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: "支付宝打款成功！",
                type: "success",
              });
     this.$router.go(-1)
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
      if (this.lurutype == 3) {
        //最终微信支付打款
        this.weixinObj.id = this.payMentInfo.id;
        axios
          .post("/own/wx/pay/verify/payment", this.weixinObj)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: "微信打款成功！",
                type: "success",
              });
   this.$router.go(-1)
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
      if (this.lurutype == 4) {
        //线下打款
        console.log("5555", this.payMentInfo.id);
        this.xianxiadakuanObj.id = this.payMentInfo.id;
        axios
          .post("/own/commission/dowithdraw", this.xianxiadakuanObj)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: "线下打款成功！",
                type: "success",
              });
        this.$router.go(-1)
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
    },

  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f6f8fb;
  overflow: auto;
  .content {
    width: 100%;
    padding: 15px;
    .head {
      width: 100%;
      height: 125px;
      background: white;
      border-radius: 8px;
      padding: 15px;
      .meney {
        width: 100%;
        height: 65px;
        background: #fff3f1;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        padding: 15px 0;
        .inner {
          width: 33.3%;
        }
      }
      .ballot {
        width: 100%;
        color: #333333;
        font-size: 13px;
        margin-top: 15px;
      }
    }
    .main {
      width: 100%;
      background: white;
      border-radius: 8px;
      padding: 15px;
      margin-top: 15px;
      .inside {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
      }
    }
    .footer {
      width: 100%;
      background: white;
      border-radius: 8px;
      padding: 15px;
      margin-top: 15px;
      .working_cat {
        font-size: 14px;
        color: #787d85;
        margin-top: 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .cloud_account {
        font-size: 14px;
        color: #787d85;
        margin-top: 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .alipay {
        font-size: 14px;
        color: #787d85;
        margin-top: 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .offline {
        font-size: 14px;
        color: #787d85;
        margin-top: 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .sure {
      width: 100%;
      height: 44px;
      color: white;
      border-radius: 25px;
      font-size: 14px;
      text-align: center;

      background: #005aff;
      margin-top: 20px;
    }
  }
  .pdf {
    width: 100%;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .upLoad {
    width: 100%;
    height: 150px;
    background: white;
    border-radius: 8px;
    margin-top: 20px;
    padding: 15px;
    .text {
      font-size: 14px;
    }
    .uploader{
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 15px;
    }
  }
}

/deep/ .van-nav-bar__content {
  background: #f6f6f6;
}
/deep/ .van-nav-bar .van-icon {
  color: black;
}
</style>